<template>
  <view class="">
		<tn-nav-bar alpha backTitle=""></tn-nav-bar>
    <view :style="{ paddingTop: vuex_custom_bar_height + 'px' }">  </view>
		<view class="title" style="margin-top: 100rpx;">
				<view>恭喜您</view>
				<view>
					设备连接成功啦！
				</view>
			</view>
    <view class="success-content">

      
      <view class="success-animation">
        <image class="wifi-image" src="/static/image/wifires.png" mode="widthFix" />
      </view>
      
      <view class="success-btn" @click="useNow">
        <text class="success-btn-text">立即使用</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    useNow() {
      uni.setStorageSync('token', 'Hello')
      // 跳转到设备使用页面
      uni.reLaunch({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style scoped>
.title {
	font-size: 46rpx;
	font-weight: bold;
	margin-left: 32rpx;
	margin-bottom: 60rpx;
	color: #111;
}
.success-container {
  min-height: 100vh;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 60rpx;
}

.success-title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 16rpx;
}

.success-subtitle {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 120rpx;
}

.success-animation {
	margin-top: 100rpx;
  position: relative;
  width: 400rpx;
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 120rpx;
}

.wifi-image {
  width: 400rpx;
  height: 400rpx;
}

.success-btn {
  width: 500rpx;
  height: 96rpx;
  background: #000;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-btn-text {
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
}
</style>
